Container Queries and Feature Detection

Practice using PostCSS, container queries, and @supports for progressive enhancement.

Responsive Cards

The cards below use container queries to adapt to their container size. When the container is wide enough, the cards switch to a horizontal layout.

Placeholder image 1

Card Title 1

This card demonstrates container queries. Try resizing the browser window to see how the card layout adapts to its container size, not the viewport size.

Placeholder image 2

Card Title 2

Container queries allow components to be truly modular. The same card component works in narrow sidebars and wide content areas.

Placeholder image 3

Card Title 3

By using @supports, we ensure these cards work even in browsers that do not support container queries yet. Progressive enhancement in action!

Build Process Information

This page uses PostCSS to process the CSS files. The build process combines multiple CSS files, adds vendor prefixes, and minimizes the output.

  • Source files are in css/ organized by CUBE CSS principles
  • PostCSS processes css/main.css and outputs css/main.min.css
  • The JavaScript in the head checks for the processed file and uses it if available